<template>
  <div class="two" id="main"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  methods: {
    init_one() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      var labelRight = {
        position: "right",
      };
      option = {
        title: {
          text: "其他增长率",
          subtext: "Other growth rates",
          sublink: 'https://www.bilibili.com/read/cv6363496/'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: 80,
          bottom: 30,
        },
        xAxis: {
          type: "value",
          position: "top",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "category",
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          data: [
            "德国",
            "俄罗斯",
            "法国",
            "英国",
            "日本",
            "新加坡",
            "印度",
            "美国",
            "中国",
            "世界",
          ],
        },
        series: [
          {
            name: "增长率",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              formatter: "{b}",
            },
            data: [
              3.52,
              2.42,
              2.45,
              0.44,
              0.53,
              1.14,
              4.12,
              5.12,
              { value: -0.36, label: labelRight },
              1.58,
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.init_one();
  },
};
</script>

<style scoped>
div {
  height: 660px;
}
</style>